
<template>
  <view class="home">
    <view class="home-tab-title">
      <view class="title-inner">
        <uni-segmented-control :values='tab' :current='curIdx' @clickItem='onClickItem' style-type="text" active-color="#d52a7e">
        </uni-segmented-control>
      </view>
      <view class="iconfont iconsearch"></view>
    </view>
    <view class="home-content">
      <view v-if='curIdx === 0'>
        <home-recommend></home-recommend>
      </view>
      <view v-if='curIdx === 1'>
        <home-category></home-category>
      </view>
      <view v-if='curIdx === 2'>
        <home-new></home-new>
      </view>
      <view v-if='curIdx === 3'>
        <home-album></home-album>
      </view>
    </view>
  </view>
</template>

<script>
import homeRecommend from './home-recommend'
import homeCategory from './home-category'
import homeNew from './home-new'
import homeAlbum from './home-album'
import { uniSegmentedControl } from '@dcloudio/uni-ui'
export default {
  components: {
    homeAlbum,
    uniSegmentedControl,
    homeNew,
    homeCategory,
    homeRecommend
  },

  data() {
    return {
      tab: ['推荐', '详情', '最新', '专辑'],
      curIdx: 0
    }
  },
  methods: {
    onClickItem(e) {
      if (this.curIdx !== e.currentIndex) {
        this.curIdx = e.currentIndex
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.home {
  .home-tab-title {
    position: relative;
  }
  .title-inner {
    width: 60%;
    margin: 0 auto;
  }
  .iconsearch {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
  }
}
</style>